<template>
  <div class="login">
    <!-- 导航栏 -->
    <!-- <button @click="test">点我修改test</button>  测试actions -->
    <!-- 把导航栏进行了封装，对登录页导航栏进行相应改造 -->
    <hmNavBar path="/home/find"></hmNavBar>
    <!-- 内容 -->
    <div class="content">
      <h3 class="title">您好，请登录</h3>
      <van-form ref="form">
        <van-field
          placeholder="请输入手机号"
          v-model="form.mobile"
          :rules="rules.mobile"
          name="mobile"
        >
          <template #left-icon>
            <i class="iconfont pr20">&#xe60b;</i>
          </template>
        </van-field>
        <van-field
          placeholder="请输入验证码"
          v-model="form.code"
          :rules="rules.code"
        >
          <template #left-icon>
            <i class="iconfont pr20">&#xe60c;</i>
          </template>
          <template #button>
            <div class="code" @click="getCode" v-if="totalTime === 6">
              获取验证码
            </div>
            <div class="code" v-else>{{ totalTime }}S后重试</div>
          </template>
        </van-field>
      </van-form>
      <div class="tip">
        登录即同意 <span class="tip-color">《用户使用协议》</span> 和
        <span class="tip-color">《隐私协议》</span>
      </div>
      <van-button color="#E40137" block round @click="submit">确定</van-button>
    </div>
  </div>
</template>

<script>
import { auCode, auLogin } from '@/api/login.js'
import { getLocal, saveLocal } from '@/utils/local.js'
export default {
  data () {
    return {
      totalTime: 6, // 定义倒计时时间
      form: {
        mobile: '',
        code: ''
      },
      rules: {
        mobile: [
          { required: true, message: '请输入手机号', trigger: 'onChange' },
          {
            validator: value => {
              const _reg = /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/
              return _reg.test(value)
            },
            message: '请输入正确的手机号',
            trigger: 'onChange'
          }
        ],
        code: [{ required: true, message: '请输入验证码', trigger: 'onChange' }]
      }
    }
  },
  methods: {
    test () {
      this.$store.dispatch('setTestA', 654321)
    },
    //   获取验证码
    // 使用await async try()catch来改造一下
    /*
      ~~新方法：让异步代码可以同步处理，顺序执行~~
      1. 删除.then 在 .then前面方法加个await
      2. 定义一个变量 =await 的方法返回值(没有返回值就不用理了)
      3. .await最近的父级方法加一个async
    try{有可能出错代码}catch(error){出错后处理}
    */
    async getCode () {
      try {
        await this.$refs.form.validate('mobile')
        // .then(() => {
        // 在验证成功后调用验证码api并显示倒计时。这个接口不能传多余的参数，所以不能用this.form，要什么就只能传什么
        this.totalTime--
        let _time = setInterval(() => {
          this.totalTime--
          if (this.totalTime <= 0) {
            this.totalTime = 6
            clearInterval(_time) // 记得清除定时器
          }
        }, 1000)
        const res = await auCode({
          mobile: this.form.mobile
          // }).then(res => {
        })
        this.$toast.success(res.data.data)
        window.console.log(res)
        // })
        //   this.$toast.success('验证成功')
        // })
      } catch {
        // .catch(() => {
        this.$toast.fail('验证失败')
        // })
      }
    },
    // 确定按钮点击
    async submit () {
      try {
        await this.$refs.form.validate()
        // .then(() => {
        // 验证成功后调用登录api并保存用户信息到vuex
        const res = await auLogin(this.form)
        // .then(res => {
        this.$toast.success('登陆成功')
        window.console.log('登录信息', res)
        saveLocal(res.data.data.jwt)
        this.$store.commit('setUserInfo', res.data.data.user)
        // 登录成功后跳转至home页,并改变vuex中的登录状态为true，记住登录状态
        this.$store.commit('setLoginStatus', true)
        // 使用了路由传参
        // 登录成功后，如果有redirect路由传值，就回到redirect页面，没有就是直接进入my页面
        const _redirect = this.$route.query.redirect
        if (_redirect) {
          this.$router.push(_redirect)
        } else {
          this.$router.push('/home')
        }
        // })
        //   this.$toast.success('验证成功')
        // })
      } catch {
        // .catch(() => {
        // this.$toast.fail('验证失败')
        // })
      }
    }
  }
}
</script>

<style lang="less" scoped>
// scope 只管当前组件和子组件的最外层  不加就是全局
.login {
  .content {
    padding: 0 @p15;
    .title {
      font-size: 18px;
      font-family: PingFangSC, PingFangSC-Semibold;
      font-weight: 600;
      text-align: left;
      color: #222222;
      line-height: 25px;
      letter-spacing: 0px;
      margin-top: 50px;
      margin-bottom: 65px;
    }
    .pr20 {
      padding-right: 20px;
    }
    .code {
      font-size: 16px;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      text-align: left;
      color: #00b8d4;
      line-height: 23px;
      letter-spacing: 0px;
    }
    .tip {
      margin-top: 27px;
      margin-bottom: 44px;
      font-size: 12px;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      text-align: left;
      color: #181a39;
      line-height: 16px;
      letter-spacing: 0px;
    }
    .tip-color {
      color: #00b8d4;
    }
  }
}
</style>
